<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta name="applicable-device" content="pc">
    <title>歌手列表 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/layout_0412.css?max_age=25920000&amp;v=20190312">
    <link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/singer.css?max_age=25920000&amp;v=20170503">
	<link rel="stylesheet" href="assets/css/reset.css">
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/slider.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/HBSlider.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/auth.css">
	<script src="js/auth.js"></script>
	<script src="js/jquery-3.5.1.js"></script>
	<style>
		.main {
		    width: 100%;
		    float: left;
		    margin-left: 70px;
		    box-sizing: border-box;
		}
		
		.mod_singer_push {
		    position: relative;
		    width: 100%;
		    height: 376px;
		    overflow: hidden;
			}
			
			.mod_singer_push--nofocus .singer_push__tit {
			    width: 720px;
			    height: 57px;
			    margin-top: 160px;
			    margin-left: 350px;
			    background-position: 0 0; 
			}
			
			 .pictureSize{
				 width:45px;
				 height:45px;
				 order: 1px solid white;
				 border-radius: 30px;
				 margin-top:5px;
		  	  }
		  	  h1, h2, h3, h4, h5, h6 {
			  	 color: black; 
			 }
			 
			 .mod_page_nav {
			    font-size: 14px;
			}
		</style>
	
	</head>
<body class="os_mac">
<!-- 头部 S -->

<div class="mod_header">
        <header>
			<div class="container">
				<div class="navbar-header">
					<a href="" class="navbar-brand">
						<img src="assets/images/logo.png" alt="">
					</a>
				</div>
				<nav>
					<ul class="nav navbar-nav navbar-link" style="display: block;">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="#">我的音乐</a>
						</li>
						<li class="active">
							<a href="#">歌手</a>
						</li>
						<li>
							<a href="#">排行榜</a>
						</li>
						<li>
							<a href="#">会员中心</a>
						</li>
						<li>
							<a href="#">歌曲广场</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right navbar-sm" style="display: block;">
						<li><input type="text" class="search-input" placeholder="歌名 / 歌手"></li>
						<li>
							<a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
						</li>
						<li id="loginItem">
							<a href="register_login.jsp">注册 / 登录</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>
    </div>
    <!-- 头部 E -->
    	<div class="mod_singer_push js_my_singers_nologin mod_singer_push--nofocus">
        <div class="section_inner">
            <h2 class="singer_push__tit"><i class="icon_txt">万千歌手，尽在眼前</i></h2>
        </div>
    </div>
<div class="main">
<div class="mod_singer_tag" id="tag_box">
<div class="singer_tag__list js_area areaItem">
	<a href="javascript:;" class="singer_tag__item singer_tag__item--all singer_tag__item--select">全部</a>
	<a href="javascript:;" class="singer_tag__item">未知</a>
	
</div>

<div class="singer_tag__list js_sex" id="genderItem">
	
	<a href="javascript:;" class="singer_tag__item singer_tag__item--all singer_tag__item--select genderList">全部</a>
	<a href="javascript:;" class="singer_tag__item genderList">男</a>
	<a href="javascript:;" class="singer_tag__item genderList">女</a>
	<input type="hidden" id="genderTag" value="全部">
</div>

</div>
		<div id="mod-singerlist">

        <div class="mod_singer_list">
            <ul class="singer_list__list js_avtar_list  singerDetail">
        			
                <li class="singer_list__item">
                    <div class="singer_list__item_box">
                        <a href="#" class="singer_list__cover js_singer" >
                            <img class="singer_list__pic" src="//y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg?max_age=2592000">
                        </a>
                        <h3 class="singer_list__title">
                        <a href="#" >周杰伦</a>
                        </h3>
                    </div>
                </li>
            </ul>
              <div class="mod_page_nav js_pager_comment" id="pageList">
    	<a href="javascript:;" class="js_pageindex current">1</a>
    	<!-- <strong class="more">...</strong> -->
    	<a href="javascript:;" class="next js_pageindex" title="下一页" hidefocus="">
    	<span>&gt;</span></a><span id="pagesDetail">共页</span>
    </div>
        </div>
     </div> 
    </div>
		<script>
		
		/* var loginAccount = "${sessionScope.loginAccount}"; */
		var loginAccount = {
			accountId : "10",
			accountTel : "17519485014",
			accountPwd : "123456",
			accountPicture : null,
			vipStatus : "0"
		};  
		
		var accountId = "10";
		$(document).ready(function(){
			//判断用户session是否存在，存在右上角显示用户
			if (loginAccount != "") {
				$("#loginItem").empty();
				$("#loginItem").append("<img id=\"faceImg\" class=\"pictureSize\" src=\"${pageContext.request.contextPath}/front/img/adminpicture.jpg\"/>");
				
				$(".areaItem").empty();
				$(".areaItem").append("<input type=\"hidden\"id=\"areaTag\"><a href=\"javascript:;\" class=\"singer_tag__item singer_tag__item--all singer_tag__item--select areaList\">全部</a>");
				$("#areaTag").val($(".areaItem").text());
				//渲染地区选择栏
				renderingSelect();
				//渲染歌手列表
				var areaName = "全部";
				var gender = "全部";
				var pageNum = 1;
				sendAjax(areaName,gender,pageNum);
				
			}else {
				location.href = "${pageContext.request.contextPath}/front/register_login.jsp";
			}
		})
		
		//渲染上方地区类型
		function renderingSelect() {
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/SingerServlet",
				type:"post",
				data:{op:"getArea"},
				dataType:"json",
				success:function(result,status,xhr){
						for (var i = 0; i < result.length; i++) {
							$(".areaItem").append("<a href=\"javascript:;\" class=\"singer_tag__item areaList\">"+result[i].areaName+"</a>");
						}
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
		}
		
		//渲染歌手页面发送AJAX
		function sendAjax(areaName,gender,pageNum) {
			$.ajax({
				async:true,
				url:"${pageContext.request.contextPath}/SingerServlet",
				type:"post",
				data:{op:"getSinger",areaName:areaName,gender:gender,pageNum:pageNum,pageSize:"10"},
				dataType:"json",
				success:function(result,status,xhr){
					$("#pageList").empty();
					$(".singerDetail").empty();
					for (var i = 0; i < result.data.length; i++) {
						if (result.data[i].singerPicture) {
							$(".singerDetail").append("<li class=\"singer_list__item\"><div class=\"singer_list__item_box\"><a href=\"#\" class=\"singer_list__cover js_singer\">"+
	                            	" <img class=\"singer_list__pic\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/"+result.data[i].singerPicture+"\"></a>"+
	                            	" <input type=\"hidden\" class=\"playSongId\" value="+result.data[i].songId+">"+
                       			 	" <h3 class=\"singer_list__title\"><a href=\"#\">"+result.data[i].singerName+"</a></h3></div></li>");
						} else {
							$(".singerDetail").append("<li class=\"singer_list__item\"><div class=\"singer_list__item_box\"><a href=\"#\" class=\"singer_list__cover js_singer\">"+
	                            	" <img class=\"singer_list__pic\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/singerpic.jpg\"></a>"+
	                            	" <input type=\"hidden\" class=\"playSongId\" value="+result.data[i].songId+">"+
                       			 	" <h3 class=\"singer_list__title\"><a href=\"#\">"+result.data[i].singerName+"</a></h3></div></li>");
						}
					}
							//分页追加
							for (var i = 1; i <= result.pages; i++) {
								if (i==result.pageNum) {
									if (i==1) {
										$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
									}else {
										$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex current pageButton\">"+i+"</a>");
									}
								}else {
									$("#pageList").append("<a href=\"javascript:;\" class=\"js_pageindex pageButton\">"+i+"</a>");
								}
							}
							//总页数和下一页追加
							$("#pageList").append(" <a href=\"javascript:;\" class=\"next js_pageindex nextPage\"><span>&gt;</span></a>"+
												" 第<span id=\"pagesTotal\" >"+result.pageNum+"</span>页&nbsp&nbsp"+
												" 共<span id=\"pagesDetail\" >"+result.pages+"</span>页");
				
				},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
		}
		
		//对页码做点击事件
		$(document).on("click",".pageButton",function(){
			var nowPage = $(this).text();
				sendAjax($("#areaTag").text(),$("#genderTag").text(),nowPage);
				$("#pagesTotal").text(nowPage);
		})
		
		//下一页按钮
			$(document).on("click",".nextPage",function(){
			var nowPage = $("#pagesTotal").text();
			var maxPage = $("#pagesDetail").text();
			if (nowPage<maxPage) {
				sendAjax($("#areaTag").text(),$("#genderTag").text(),nowPage*1+1);
				$("#pagesTotal").text(nowPage*1+1);
			}
		})
		
		//点击地区选择发送ajax
		$(document).on("click",".areaList",function(){
			var nowArea = $(this).text();
			$("#areaTag").val(nowArea);
			var areaName = $("#areaTag").val();
			var gender = $("#genderTag").val();
			sendAjax(areaName,gender,1);
			var areaList = $(".areaList");
			for (var i = 0; i < areaList.length; i++) {
				$(areaList[i]).removeClass("singer_tag__item--select");
			}
			$(this).addClass("singer_tag__item--select");
		})
		
		//点击性别选择发送ajax
		$(document).on("click",".genderList",function(){
			var nowGender = $(this).text();
			$("#genderTag").val(nowGender);
			var areaName = $("#areaTag").val();
			var gender = $("#genderTag").val();
			sendAjax(areaName,gender,1);
			var genderList = $(".genderList");
			for (var i = 0; i < genderList.length; i++) {
				$(genderList[i]).removeClass("singer_tag__item--select");
			}
			$(this).addClass("singer_tag__item--select");
		})
		
		
	</script>
</body>
</html>
